<template>
	<view>

		<!-- 		<view class="box" >
			<view class="icon">
				<img src="../../static/icons/dengji.png" alt="伤员登记" srcset="" width="32" />
			</view>
			<text style="font-size: 12px;">伤员登记</text>
		</view> -->
		<view v-if="message" class="notice-bar" @click="getMore">
			<uni-notice-bar scrollable show-icon single show-get-more text="您有一条新消息，请点击进行查看"></uni-notice-bar>
		</view>


		<uni-list>
			<uni-list-item :thumb="item.img" :to="item.to" v-for="(item,index) in filtersMenuList()" :key="index"
				showArrow :title="item.name" />

		</uni-list>

	</view>
</template>

<script>
	import {
		log
	} from '../../common/util.js'
	import {
		toast,
		signOut,
		getStorageSync
	} from '../../utils/utils.js'


	export default {

		data() {
			return {
				
				message:false,
				token: getStorageSync('token') || null,
				offlineMenuList: [{
						name: '伤员登记',
						to: '/pages/offlineWounded/index',
						img: '../../static/icons/dengji.png'
					},
					{
						name: '伤员列表',
						to: '/pages/offlineCasualtyList/index',
						img: '../../static/icons/list.png'
					}
				],
				menuList: [
					// {

					// 	name: '腕带识别',
					// 	to: '/pages/scan/index',
					// 	img: '../../static/icons/scan.png'
					// },
					{
						name: '伤员登记',
						to: '/pages/wounded/index',
						img: '../../static/icons/dengji.png'
					},
					{
						name: '伤员列表',
						to: '/pages/casualtyList/index',
						img: '../../static/icons/list.png'
					},
					{
						name: '医嘱列表',
						to: '/pages/doctorsAdvice/index',
						img: '../../static/icons/yizhu.png'
					},

					{

						name: '物资清单',
						to: '/pages/goodsManager/collarGoods',
						img: '../../static/icons/wzqd.png'
					},
					{
						name: '后送管理列表',
						to: '/pages/evacuation/index',
						img: '../../static/icons/evacuation.png'
					},
					{
						name: '后送记录',
						to: '/pages/evacuationRecording/index',
						img: '../../static/icons/Recording.png'
					},
					{
						name: '组物资管理',
						to: '/pages/goodsManager/index',
						img: '../../static/icons/goods.png'
					}
					// {
					// 	name: '患者流转',
					// 	to: '',
					// 	img: '../../static/icons/change.png'
					// }
				]
			}
		},

		onLoad() {
			if (typeof(this.token) === 'boolean') {
				uni.setTabBarItem({
					index: 1,
					visible: false
				})

			} else {
				uni.setTabBarItem({
					index: 1,
					visible: true
				})
			}

		},
		mounted() {
			  // 创建WebSocket连接
			    uni.connectSocket({
			      url: 'ws://47.108.90.125:8058/prod-socket/websocket/flczz1',
			      success: () => {
			        console.log('WebSocket连接成功');
			      }
			    });
			
			    // 监听WebSocket连接成功事件
			    uni.onSocketOpen(() => {
			      console.log('WebSocket连接已打开');
				   setInterval(() => {
				        uni.sendSocketMessage({
				          data: 'heartbeat'
				        });
				      }, 5000); // 5秒发送一次心跳包
			    });
			
			    // 监听接收消息事件
			    uni.onSocketMessage((res) => {
					console.log(res);
					if(typeof(res.data) === 'string' && res.data !== 'heartbeat'){
						console.log(1223,typeof(res.data),res.data);
						toast(res.data)
					}else if(res.data !== 'heartbeat'){
						console.log(1478,typeof(res.data),res.data);
						if(res.data){
							this.message=true
						}
						 this.message = res.data;
					}else{
						console.log('11:',typeof(res.data),res.data,res);
					}
			    });
			    // 监听WebSocket连接关闭事件
			    uni.onSocketClose(() => {
			      console.log('WebSocket连接已关闭');
			    });
		},
		onTabItemTap() {
			const token = getStorageSync('token') || null


			if (!token) {
				signOut()
				toast('请先登录后在使用!')
			}
		},
		methods: {
			getMore(){
				this.message=false
				uni.switchTab({
					url:'/pages/message/index'
				})
			},
			//根据登录状态，展示不同的按钮
			filtersMenuList() {
				if (typeof(this.token) === 'string') {
					// 账号密码登录状态
					return this.menuList
				} else {
					// 离线登录状态
					return this.offlineMenuList
				}
			}


		}
	}
</script>


<style lang="scss">
	.notice-bar {
		width: 100%;
		height: 100%;
	}

	.box {

		margin: 30px;

		.icon {
			width: 50px;
			height: 50px;
			border: 1px solid #1a2e05;
			justify-content: center;
			border-radius: 8px;
			background-color: #1a2e05;

			font-size: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>